<template>
	<view class="main-wrap">
		<cu-custom bgColor="bg-gradual-green" :isBack="true"><block slot="content">订单详情</block></cu-custom>
		<view class="receive-info">
			<text class="cuIcon-locationfill text-gray"></text>
			<text>{{order.receiveUser.name}}</text>
			<text class="phone">{{order.receiveUser.phone}}</text>
			<text>{{order.address.detail}}</text>
		</view>
		<view class="goods-info">
			<view class="goods-item" v-for="(item, index) in order.detail" :key="index">
				<image class="goods-img" :src="baseUrl + item.thumbnail"></image>
				<view class="goods-desc">
					<view>
						<text class="title">{{item.goodsName}}</text>
					</view>
					<view class="sku">
						<text>数量：{{item.count}} 规格：{{item.skuName}}</text>
					</view>
					<view class="price">
						<text class="originalPrice">￥{{item.originalPrice}}</text>
						<text>￥{{item.discountPrice}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="price-info">
			<view class="row-item">
				<text>总计：</text>
				<text>{{order.originalPrice}}元</text>
			</view>
			<!-- <view class="row-item">
				<text>应付：</text>
				<text>50元</text>
			</view> -->
			<view class="row-item">
				<text>优惠：</text>
				<text>{{order.originalPrice - order.discountPrice}}元</text>
			</view>
			<view class="row-item-other">
				<text>实付：</text>
				<text>{{order.actualPrice}}元</text>
			</view>
		</view>
		<view class="operation-btn-wrap">
			<button class="cu-btn round bg-green margin-tb-sm lg operation-btn" v-if="order.status === 1" @click="operation(2)">确认订单</button>
			<button class="cu-btn round bg-red margin-tb-sm lg operation-btn" v-if="order.status === 2" @click="operation(3)">完成订单</button>
		</view>
	</view>
</template>

<script>
	import order from '@/api/order.js'
	import config from '@/config.js';
	export default {
		data() {
			return {
				id: '',
				order: {
					receiveUser: {},
					address: {},
					detail: []
				},
				baseUrl: config.network.imageUrl
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getDetail();
		},
		methods: {
			getDetail() {
				order.findById(this.id).then(res => {
					this.order = res.data.data;
				});
			},
			operation(status) {
				order.operation(this.id, status).then(() => {
					uni.$emit('refreshOrder');
					uni.navigateBack({
						delta: 1
					})
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.main-wrap{
	}
	.receive-info{
		padding: 15px;
		background-color: #FFF;
		border-radius: 0px 0px 10px 10px;
		.phone{
			margin: 0px 10px;
		}
	}
	.goods-info{
		background-color: #FFF;
		border-radius: 10px;
		margin-top: 10px;
		padding: 20px 15px;
	}
	.goods-item{
		display: flex;
		 margin-bottom: 30rpx;
		.goods-img{
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
		}
		.goods-desc{
			margin-left: 30rpx;
			.title{
				
			}
			.sku{
				
			}
			.price{
				
			}
		}
	}
	.price-info{
		background-color: #FFF;
		margin-top: 10px;
		padding: 15px;
		.row-item{
			display: flex;
			padding: 20rpx;
			text:last-child{
				flex: 1;
				text-align: right;
			}
		}
		.row-item-other{
			text-align: right;
			padding: 20rpx;
		}
	}
</style>
